<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./static/bejson/css/global.min.css?20200630" />
    <link rel="stylesheet" type="text/css" href="./static/bejson/css/indexCodeMirror.min.css" />
    <style>
        .body {
            background: #3494E6;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #EC6EAD, #3494E6);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #EC6EAD, #3494E6);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            min-height: 100vh;
        }

        .btn-group-vertical>.btn,
        .btn-group>.btn {
            position: relative;
            float: unset;
        }

        .CodeMirror{
            height: 75vh;
        }
    </style>
</head>

<body class="body">
    <div class="container t-small-margin">
        <ul class="top1-link">
        </ul>
        <h1 class="font-18 v-big-margin no-padding-v">Json格式化校验</h1>

        <!--  start 各个模块代码 -->
        <form name="main" onsubmit="return false">
            <div class="editor-box1">
                <div class="float-left relative" style="width: 950px">
                    <!-- json编辑器 -->
                    <div id="editor">
                        <textarea id="code" name="code"></textarea>
                        <div id="resize">
                            <i class="icon-bars"></i>
                        </div>
                    </div>
                    <!-- 功能 -->
                    <div class="t-huge-margin">
                        <div class="btn-group">
                            <button class="copy hide display-none"></button>
                            <input type="submit" class="btn btn-primary" name="validate" data-ga="validate"
                                id="validate" value="格式化校验">
                            <!--                <button type="button" class="btn btn-primary" id="formatCheck" data-html="index">格式化校验</button>-->
                            <button type="button" class="btn btn-primary" id="compressZipJson"
                                data-html="index">压缩</button>
                            <button type="button" class="btn btn-success" id="escapeJson" data-html="index">转义</button>
                            <button type="button" class="btn btn-success" id="restoreJson"
                                data-html="index">去除转义</button>
                            <button type="button" class="btn btn-info" id="unicode2ch"
                                data-html="index">Unicode转中文</button>
                            <button type="button" class="btn btn-info" id="ch2unicode"
                                data-html="index">中文转Unicode</button>
                            <!-- <button type="button" class="btn" id="json2get" data-html="index">转GET参数</button> -->
                            <button type="button" class="btn btn-warning" id="copyJson" data-html="index">复制 </button>
                        </div>
                        <div class="checkbox-primary">
                            <input type="checkbox" id="loadChecked" checked="">
                            <label for="loadChecked">记忆</label>
                        </div>
                        <button type="button" class="btn absolute btn-sm btn-danger"
                            style="bottom: 70px;right: 8px;z-index: 9" id="clearCode" data-html="index">清空</button>
                    </div>
                </div>

                <!-- 保存数据 和 日志列表 -->
                <div class="save-data-con">
                    <div class="save-data-box">
                        <div class="btn-con">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-primary" style="border-radius: 20px;"
                                    id="saveData">保存校验数据</button>
                                <button class="btn btn-sm btn-danger" style="border-radius: 20px;"
                                    id="removeData">清空记录</button>
                            </div>
                        </div>
                        <ul class="empty-list" id="daveDataList">
                        </ul>
                    </div>
                </div>
            </div>
        </form>
        <!-- 校验结果 -->
        <div class="with-icon display-none" id="jsonlintBox">
            <i class="icon-info-sign" id="jsonlintIcon"></i>
            <pre class="content" id="jsonlintResult">请贴入要格式化的JSON代码</pre>
        </div>
        <div class="t-big-margin">
            <script>jiazai_dag_all('INDEX_PC_HENGFU')</script>
        </div>

        <script src="./static/bejson/js/global.min.js?v=20200630" type="text/javascript" charset="utf-8"></script>
        <script src="./static/bejson/js/lzma.js" type="text/javascript" charset="utf-8"></script>

        <div class="xf2-gg-left" style="height:auto;width:120px;margin-left:-705px;">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        </div>

        <!-- jsonformat专有-->
        <!--可替换通用script-->
        <!-- 编辑器组件 -->
        <script src="./static/bejson/js/indexCodeMirror.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 判断json正确与否组件 -->
        <script>
            //根据DOM元素的id构造出一个编辑器================================================================================================================================================================================================
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                mode: 'application/json', //设置json模式
                lineNumbers: true, //是否显示左边换行术字
                lineWrapping: false, //是否折叠
                foldGutter: true,
                indentUnit: 4,
                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
            });
        </script>
        <script src="./static/bejson/js/jsonlint.js" type="text/javascript" charset="utf-8"></script>
        <script src="./static/bejson/js/bejson_index20200722.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- js压缩组件 -->
        <script src="./static/bejson/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

            //初始化保存的数据
            var initData = $.zui.store.get('saved_json');
            if (initData && initData.length) {
                $('#daveDataList').removeClass('empty-list');
                var fragment = document.createDocumentFragment();
                $(initData).each(function (index, item) {
                    var li = document.createElement('li');
                    li.className = 'border-bottom-d-color';
                    li.innerHTML = '<p class="">\n' +
                        '<span class="save-title">' + item.name + '</span>\n' +
                        '<span class="save-timer">' + item.time + '</span>\n' +
                        '<span class="display-none data">' + item.data + '</span>\n' +
                        '</p>';
                    fragment.appendChild(li);
                });
                $('#daveDataList').html('');
                document.getElementById('daveDataList').appendChild(fragment);
            }

            //监听codemirror输入，买按一下键盘，存储一次编辑器内容
            document.onkeyup = function () {
                $.zui.store.set('lastJsonData', editor.getValue());
            };

            //初始化loadChecked
            var lastChecked = $.zui.store.get('lastLoadChecked');
            if (lastChecked && lastChecked === 'no') {
                $('#loadChecked').attr('checked', false);
            } else {
                $('#loadChecked').attr('checked', 'checked');
            }

            //初始化上一次json数据
            var lastJson = $.zui.store.get('lastJsonData');
            if (lastJson && (!lastChecked || lastChecked === 'yes')) {
                if (typeof lastJson == 'object') {
                    editor.setValue(JSON.stringify(lastJson));
                } else {
                    editor.setValue(lastJson.toString());
                }
            }

            //滚动
            var swiper = new Swiper('.swiper-container', {
                loop: true,
                speed: 600,
                slidesPerView: 5,
                spaceBetween: 5,
                centeredSlides: true,
                watchSlidesProgress: true,
                direction: 'vertical',
                autoplay: {
                    delay: 300
                },
                on: {
                    setTranslate: function () {
                        var slides = this.slides
                        for (var i = 0; i < slides.length; i++) {
                            var slide = slides.eq(i)
                            progress = slides[i].progress
                            //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
                            slide.css({ 'opacity': '', 'background': '' }); slide.transform('');//清除样式
                            slide.css('color', 'rgb(' + (Math.abs(progress) * 64 + 50) + ',' + (Math.abs(progress) * 64 + 50) + ',' + (Math.abs(progress) * 64 + 50) + ')');
                            // slide.transform('scale('+(1 - Math.abs(progress)/32)+')');

                        }
                    },
                    setTransition: function (transition) {
                        for (var i = 0; i < this.slides.length; i++) {
                            var slide = this.slides.eq(i)
                            slide.transition(transition);
                        }
                    },
                }
            });

            //鼠标覆盖停止自动切换
            swiper.el.onmouseover = function () {
                swiper.autoplay.stop();
            };

            //鼠标离开开始自动切换
            swiper.el.onmouseout = function () {
                swiper.autoplay.start();
            };
        </script>
</body>

</html>